<template>
  <div>
    <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%; height: 800px; margin-bottom: 20px;"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="index" width="80" label="index"/>
    <el-table-column property="age" label="age" />
    <el-table-column property="user" label="user"/>
    <el-table-column property="price" label="price" />
    <el-table-column property="gender" label="gender" show-overflow-tooltip />
  </el-table>
  <div class="demo-pagination-block">
    <div class="demonstration">Jump to</div>
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[10, 50, 100, 200]"
      :small="small"
      layout="total, sizes, prev, pager, next, jumper"
      :total="userCount"
      :disabled="disabled"
      :background="background"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>

    <!-- <h1>Home 组件</h1> -->
    <!-- <h2>{{ name }}</h2> -->
    <!-- <el-button type="primary" @click="getUserList">Primary</el-button> -->
    <!-- <el-button text @click="open">是否删除</el-button>
    <button @click="updateInfo">修改姓名</button>
    <h3>岗位: {{ job.type }}</h3>
    <h3>薪资: {{ job.price }}</h3>
    <h3>展示: {{ list }}</h3>
    <h3 v-if="set.name">姓名: {{ set.name }}</h3>
    <h3 v-if="set.age">年龄: {{ set.age }}</h3>
    <button @click="addSet">添加一个set 属性</button>
    <button @click="deleteSet">删除年龄</button>
    <el-alert title="success alert" type="success" />
    <el-date-picker
        v-model="value1"
        type="datetime"
        placeholder="Select date and time"
      />
      <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
      <el-button @click="obj.sello('张三')">获取歌曲</el-button> -->
      <!-- <el-button @click="obj.getMusicList">点击</el-button>
      <div v-for="(item, index) in musicList" :key="index">
        <div v-for="(i, index) in item.resources" :key="index">
          {{ i.uiElement }}
        </div>
      </div> -->
  </div>
  
</template>

<script>
import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
import { ref, reactive } from 'vue'
import axios from 'axios'
import Demo from '@/components/Demo.vue'
export default {
  components: {
    Demo
  },
  setup() {
    // console.log('----setup----')
    // console.log(this)
    let tableData = ref([
      {
        age: 123,
        gender: '男',
        price: 11,
        id: 1,
        user: '张三'
      }
    ])
    
    let currentPage4 = ref(5)
    let pageSize4 = ref(100)
    const background = ref(false)
    const disabled = ref(false)
    const small = ref(false)
    let userCount = ref(100)
    let name = ref('张三')
    let list = reactive(['抽烟', '喝酒', '烫头'])
    let musicList = ref({})
    let job = reactive({
      type: '属性1',
      price: '3333'
    })

    function handleSelectionChange() {

    }

    function sayHello(value) {
      console.log('你好' + value)
    }
    const handleChange = value => {
      console.log(value)
    }
    const value1 = ref('')
    let set = reactive({
      age: 18
    })
    let num = ref(1)
    const open = () => {
      ElMessageBox.confirm(
        'proxy will permanently delete the file. Continue?',
        'Warning',
        {
          confirmButtonText: 'OK',
          cancelButtonText: 'Cancel',
          type: 'warning',
        }
      ) 
      .then(() => {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
    }
    let obj = reactive({
      name: '张三',
      // sello 对象的方法
      sello: (value) => {
        console.log('你好' + value)
      },
      // 获取音乐歌单列表
      getMusicList: () => {
        axios({
          method: 'get',
          url: 'http://localhost:3000/homepage/block/page'
        }).then(res => {
          if(res.data.code === 200) {
            // console.log(res.data.data.blocks[2].creatives)
            musicList.value = res.data.data.blocks[2].creatives
            // console.log(musicList.value)
            for(let i = 0; i < musicList.value.length; i++) {
              // console.log(musicList.value[i])
              for(let j = 0; j < musicList.value[i].resources.length; j++) {
                console.log(musicList.value[i].resources[j].uiElement)
              }
            }
          } else {
            ElMessage({
              type: 'error',
              message: '获取数据失败！'
            })
          }
        })
      }
    })
    const updateInfo = function() {
      name.value = '李四'
      console.log(job)
      job.type = '属性'
      job.price = '3000'
    }
    function addSet() {
      set.name = '张三'
    }
    function deleteSet() {
      delete set.age
    }

    function getUserList() {
      axios({
        url: 'http://127.0.0.1/api/getUserNameList',
        params: {
          page: 1,
          size: 1000,
        }
      }).then(res => {
        console.log(res)
        if(res.data.status === 200) {
          tableData.value = res.data.queryData.list
          userCount.value = res.data.queryData.count
        } else {
          ElMessage('获取数据失败')
        }
      })
    }

    function handleSizeChange(val) {
      console.log(val)
    }
    function handleCurrentChange(val) {
      console.log(val)
    }
    return {
      open,
      name,
      job,
      list,
      set,
      updateInfo,
      addSet,
      deleteSet,
      value1,
      num,
      handleChange,
      obj,
      musicList,
      sayHello,
      tableData,
      handleSelectionChange,
      getUserList,
      handleSizeChange,
      handleCurrentChange,
      currentPage4,
      pageSize4,
      small,
      background,
      disabled
    }
  }
}
</script>

<style lang="scss" scoped>
  
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

</style>